<template>
  <div class="app">
    <!--作者头像姓名 -->
    <div class="bulk">
      <span style="width: 95%;height: 30px;display: flex; align-items: center;margin-top: 10px;">
        <span class="buli_i">
          <img src="../assets/01.webp" class="bulk_img" alt="" />
          <span>{{name}}</span>
          <span class="time">{{ time }}</span>
        </span>
        <img src="../assets/gengduo.png" alt="" style="width: 20px;height: 20px;">
      </span>
    </div>
    <div>
      <div style="width: 100%;height: 570px; background-color: black; margin-top: 10px;">
      <img src="../assets/01.webp" alt="" style="width: 300px;height: 570px;">
      </div>
    </div>
    <div style="width: 370px;height: 30px;margin: 0 auto; display: flex;justify-content: space-between;align-items: center;">
      <img src="../assets/fengxxianghei.png" alt="" style="width: 20px;height: 20px;">
      <div style="width: 150px;height: 30px;margin-right: 10px; display: flex;justify-content: space-between;align-items: center;">
        <img src="../assets/xhs.png" alt="" style="width: 20px;height: 20px;">
        <p style="font-size: 14px;">{{  }}123</p>
        <img src="../assets/xhs.png" alt="" style="width: 20px;height: 20px;">
        <p style="font-size: 14px;">{{  }}123</p>
        <img src="../assets/xhs.png" alt="" style="width: 20px;height: 20px;">
        <p style="font-size: 14px;">{{  }}123</p>
      </div>
    </div>
    <!-- 介绍/内容 -->
    <div style="width: 270px;height: 30px;margin-left:15px;
    color: rgb(205, 205, 205);
    margin-top: 10px;
    line-height: 30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
      "> 探店齁碧多，真假学生说。家人们，这家点真不好吃！</div>
    <!-- 评论 -->
    <!-- <div style="width: 370px;height: 40px;background-color: rgb(240, 240, 240);border-radius: 20px;margin: 0 auto; display: flex;">
      <img src="../assets/01.webp" alt="" style="border-radius: 50%;width: 33px;height: 33px;">
      <input type="text" placeholder="喜欢就支持一下" style="border: 0;background-color: rgb(240, 240, 240);height: 37px;width: 270px;align-items: center; justify-content: space-around;">
    </div> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'dozz贝',
            time:'2小时前'
        }
    },
};
</script>

<style scoped>
.bulk {
  /* width: 100%; */
  height:50px;
  display: flex;
  align-items: center;
}
.app {
  width: 400px !important;
  /* background: darkgreen; */
  margin-left: -111px;
  margin-top: 10px;
}
.bulk_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left:20px;
}
.buli_i {
  width: 100%;
  display: inline-block;
  height: 60px;
  /* background: pink; */
  display: flex;
  align-items: center;
}
.time{
    margin-left: 10px;
    font-size: 10px;
    color: rgb(180, 180, 180);
}
</style>